<template>
	<!-- 按日每天营业数据 -->
	<view class="business-content" v-if="totalBusinessList.hasOwnProperty('total')">
		<!-- 标题 -->
		<view class="business-title">
			<view style="height: 26rpx;width: 10rpx;background-color: var(--grey-text);border-radius: 10rpx;"></view>
			<view class="business-title-date" style="color:var(--grey-text) ;font-weight: 600;">汇总（{{betweenTime[0]}} 至 {{betweenTime[1]}}）</view>
		</view>
		<view class="business-content-bg">
			<!-- 销售额 -->
			<view class="business-content-display" @click="showTotalPopup('total',totalBusinessList.total)">
				<view class="business-content-title" >
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--white-text);font-size: 28rpx;">销售：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{ formatAmount(totalBusinessList.total.totalMoney) || 0 }}
							</view>
							<view class="business-unit" v-if="totalBusinessList.total.totalMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">营业：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.total.totalMoneyList.businessMoney) || 0}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.total.totalMoneyList.businessMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.total.totalMoneyList.businessMoneyNo) || 0}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.total.totalMoneyList.businessMoneyNo>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 营业额 -->
			<view class="business-content-display" @click="showTotalPopup('business',totalBusinessList.business)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--white-text);font-size: 28rpx;">营业：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(totalBusinessList.business.businessMoney) || 0}}
							</view>
							<view class="business-unit" v-if="totalBusinessList.business.businessMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
							
							<view style="font-size: 24rpx;color: var(--grey-text);margin-left: 20rpx;">同比</view>
							<view class="business-field-money" style="margin-left: 10rpx;">
								{{formatAmount(totalBusinessList.business.businessMoneyList.businessMoneyBefore) || 0}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.business.businessMoneyList.businessMoneyBefore>=10000">万</view>
							<view class="business-unit" v-else>元</view>
							<view style="margin-left: 10rpx;">
								<uni-icons
									:type="totalBusinessList.business.businessMoneyList.businessRate<0?'arrow-down':'arrow-up'"
									size="16"
									:color="totalBusinessList.business.businessMoneyList.businessRate<0?'#81B337':'#BD3124'">
								</uni-icons>
							</view>
							<view class="business-unit" style="font-size: 28rpx;"
								:style="{color:totalBusinessList.business.businessMoneyList.businessRate<0?'#81B337':'#BD3124'}">
								{{totalBusinessList.business.businessMoneyList.businessRate}}%
							</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">主营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.business.businessMoneyList.businessYesMoney) || 0}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.business.businessMoneyList.businessYesMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.business.businessMoneyList.businessNoMoney) || 0}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.business.businessMoneyList.businessNoMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 收款额 -->
			<view class="business-content-display" @click="showTotalPopup('receipts',totalBusinessList.receipts)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--white-text);font-size: 28rpx;">收款：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(totalBusinessList.receipts.receiptsMoney)}}
							</view>
							<view class="business-unit" v-if="totalBusinessList.receipts.receiptsMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">消费：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.receipts.receiptsMoneyList.checkMoney)}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.receipts.receiptsMoneyList.checkMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.receipts.receiptsMoneyList.chargeMoney)}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.receipts.receiptsMoneyList.chargeMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">其他：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.receipts.receiptsMoneyList.otherMoney)}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.receipts.receiptsMoneyList.otherMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 会员统计 -->
			<view class="business-content-display" @click="showTotalPopup('member',totalBusinessList.member)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--white-text);font-size: 28rpx;">会员统计：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(totalBusinessList.member.memberMoney)}}
							</view>
							<view class="business-unit" v-if="totalBusinessList.member.memberMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">营业充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.member.memberMoneyList.chargeMoney)}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.member.memberMoneyList.chargeMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(totalBusinessList.member.memberMoneyList.chargeNoMoney)}}
							</view>
							<view class="business-unit"
								v-if="totalBusinessList.member.memberMoneyList.chargeNoMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 开台数据 -->
			<view class="business-content-display-room" style="">
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">开台数：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{totalBusinessList.openRoom.allRoom || 0}} / {{totalBusinessList.openRoom.openRate}}%
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">桌均消：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{formatAmount(totalBusinessList.openRoom.avgRoomMoney) || 0}}
						</view>
						<view class="business-unit" v-if="totalBusinessList.openRoom.avgRoomMoney>=10000">
							万
						</view>
						<view class="business-unit" v-else>元</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "tradeChildTotal",
		components: {

		},
		emits: ['business-open'],
		props: {
			totalBusinessList: {
				type: Object,
				required: true
			},
			betweenTime: {
				type: Array,
				required: false
			}
		},
		data() {
			return {
				iconColorDetail: 'var(--grey-text)',
				iconColor: 'var(--wihte-text)'
			}
		},
		mounted() {

		},
		methods: {
			formatAmount(amount) {
				if (amount >= 10000) {
					return (amount / 10000).toFixed(2);
				} else {
					// 格式化为千分位
					if (amount % 1 === 0) {
						return Number(amount).toString()
					} else {
						return Number(amount).toFixed(2)
					}

				}
			},
			showTotalPopup(type, item) {
				const _this = this
				switch (type) {
					// case 'total':
					// 	_this.$refs.total.opens(item)
					// 	break
					// case 'business':
					// 	_this.$refs.business.opens(item, _this.betweenTime)
					// 	break
					// case 'receipts':
					// 	_this.$refs.receipts.opens(item)
					// 	break
					// case 'member':
					// 	_this.$refs.member.opens(item,_this.betweenTime)
					// 	break
					case 'total':
						this.$emit('business-open', {
							item: item,
							type
						})
						break
					case 'business':
						this.$emit('business-open', {
							item: item,
							date: _this.betweenTime,
							type
						})
						break
					case 'receipts':
						this.$emit('business-open', {
							item: item,
							type
						})
						break
					case 'member':
						this.$emit('business-open', {
							item: item,
							date: _this.betweenTime,
							type
						})
						break
					default:
						uni.showToast({
							title: '未找到标识',
							icon: 'none',
							duration: 1500
						})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.business-unit {
		font-size: 24rpx;
		color: var(--grey-text);
		margin-left: 4rpx;
	}

	.business-content {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		padding-top: 30rpx;

		.business-content-bg {
			display: flex;
			flex-direction: column;
			background-color: var(--bg-center-color);
			border-radius: 20rpx;
			box-shadow: 0 2px 0 var(--shadow-color);
		}

		.business-content-display {
			display: flex;
			flex-direction: column;
			padding: 0 38rpx 20rpx 38rpx;

			.business-content-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20rpx;
				align-items: center;
				height: 40rpx;
				line-height: 40rpx;
			}
		}

		.business-content-display-room {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;
			align-items: center;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 38rpx;
			margin-bottom: 20rpx;
		}

		.business-title {
			height: 90rpx;
			background-color: var(--bg-color);
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 20rpx;

			.business-title-date {
				margin-left: 10rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	.business-field-money {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--white-text);
	}

	.business-field-money-sub {
		font-size: 26rpx;
		font-weight: 600;
		color: var(--white-text);
	}

	.business-content-display:active {
		background: var(--bg-color)
	}
</style>